<template>
	<view class="page" v-if="phoneListShow" @click="btnCancel">
		<view class="btn_list">
			<view class="btn_list_item" v-for="item in phoneBtnList" @click="callPhone(item)" :key="item.title">
				<image class="btn_item_icon" src="../../static/images/pulice/phone_icon_aa.png" mode=""></image>
				<view class="btn_item_title">
					{{item.title}}
				</view>
				<!-- <view>
					{{item.phone}}
				</view> -->
			</view>
			<view class="btn_list_item btn_cancel " @click="btnCancel">
				取消
			</view>
		</view>
	</view>
	
	<!-- 通话权限提示开启模态框 -->
	<u-modal 
		:show="phoneShow" 
		title="通话提示" 
		content='您还未开启通话权限请打开通话权限后在使用此功能'
		showCancelButton
		confirmText="去设置"
		@confirm="clickSetUp"
		@cancel="cancelSetUp"
	></u-modal>
	
	<!-- 拨打电话 -->
	<c-privacy-num-contact :show='privacyNumContactModalShow' :callPhone="phone" :phoneBtnList="phoneBtnList"
		:orderId="orderId" :mapType="mapType" :type="contactType" @cancel="privacyNumContactModalCancel">
	</c-privacy-num-contact>
	
</template>

<script setup>
	/**
	 * phoneBtnList 显示的列表参数
	 * phoneListShow  控制弹出层是否显示
	 * @btnCancel 关闭弹出层
	 * 
	 * 隐私号使用的参数
	 * orderId  订单编号
	 * mapType  是否有地图
	 * phone  骑手手机号  用于拨打电话传参
	 * contactType  拨打电话类型 页面内获取
	 * 
	**/
	
	import { ref, defineEmits,defineProps, getCurrentInstance } from 'vue'
	import { getToPhone, setUp } from '../../../src/utlis/uni_api'
	
	const props = defineProps(['phoneBtnList','phoneListShow','orderId','mapType','phone',])
	const emit = defineEmits(['btnCancel'])
	
	const {proxy} = getCurrentInstance()
	
	// 拨打电话
	const callPhone = (item) => {
        console.log("item = ",item)
		// console.log("props.phone = ",uni.getStorageSync('getToPhone'))
		
		if(uni.getStorageSync('getToPhone')==-1){
			
			upPhoneShow()
		}else{
			contactType.value = "R-" + item.type
			privacyNumContactModalShow.value = true
			
		}
		btnCancel()
	}
	
	// 关闭拨打电话弹出层
	const btnCancel = () =>{
		emit('btnCancel')
	}
	
	// 控制通话权限模态框是否显示
	let phoneShow = ref(false)
	
	// 控制模态框是否显示 将这个方法传给子组件
	// 子组件中使用uview模态框的显示与隐藏 会触发home的onShow事件
	const upPhoneShow = () =>{
		if(uni.getStorageSync('setPhoneModalShow')){
			phoneShow.value = true
		}else{
			uni.setStorageSync('setPhoneModalShow',true)
		}
	}
	
	// 关闭打开通话权限设置模态框
	const cancelSetUp = () =>{
		phoneShow.value = false
	}
	
	const clickSetUp = () =>{
		cancelSetUp()
		setUp()
	}	
	
	// 隐私号
	// 控制是否显示隐私号模态框
	const privacyNumContactModalShow = ref(false)
	const contactType = ref("");
	
	// 关闭隐私号拨打电话模态框
	const privacyNumContactModalCancel = () =>{
		privacyNumContactModalShow.value = false
	}
	
</script>

<style scoped lang="scss">
	.page{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(170, 170, 170,.6);
		z-index: 9999;
	}
	
	.btn_list{
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		align-items: flex-end;
	}
	
	.btn_list_item{
		width: 728rpx;
		height: 100rpx;
		border-radius: 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 15rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: $color_def;
	}
	
	.btn_item_icon{
		width: 40rpx;
		height: 40rpx;
	}
	
	.btn_item_title{
		margin: 0 20rpx 0 62rpx;
	}
	
	.btn_cancel{
		border-radius: 20rpx 20rpx 0 0 ;
	}
	
</style>